<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/style.css">

</head>

<body>
    <div class="header">
        <div class="header_l">
            <div class="logo">
                <img src="./images/Logo.png" alt="">
            </div>
            <div class="register">
                <i></i>
                <a href="javascript:void(0);">忘记密码</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="main_bg"></div>
        <div class="main_content">
            <div class="main_content_t">
                <h4>确认账号</h4>
            </div>
            <div class="main_content_b">
                <div class="main_content_inp">
                    <div class="main_content_field">
                        <div class="main_content_field_a">
                            <span>+86</span>
                            <input style="border-left: 1px solid #e8e8e8;" type="text" placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="main_content_field">
                        <div class="main_content_field_a">
                            <input type="text" placeholder="请输入验证码">
                            <span>1234</span>
                        </div>
                    </div>
                    <div class="main_content_field">
                        <div class="main_content_field_a">
                            <input type="text" placeholder="请输入手机号">
                        </div>
                        <div class="main_content_field_b">
                            <button class="field_code">
                                获取验证码
                            </button>
                        </div>
                    </div>
                </div>
                <div style="padding: 0.1rem 0;"></div>
                <div class="main_content_btn">
                    <div class="btn_cancel">
                        <button class="clickCancel">取消</button>
                    </div>
                    <div class="btn_next">
                        <button class="clickNext">下一步</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_content conhide">
            <div class="main_content_t">
                <h4>重置密码</h4>
            </div>
            <div class="main_content_b">
                <div class="main_content_inp">
                    <div class="main_content_field">
                        <div class="main_content_field_a">
                            <input type="password" placeholder="请输入新密码">
                            <span><img src="./images/kaisuo.svg" alt=""></span>
                        </div>
                    </div>
                    <div class="main_content_tips">
                        <img src="./images/tanhao.svg" alt="">
                        密码长度8-19位，且数字、大写字母、小写字母、特殊符号至少包含两种
                    </div>
                    <div class="main_content_field">
                        <div class="main_content_field_a">
                            <input type="text" placeholder="再次确认新密码">
                            <span><img src="./images/guansuo.svg" alt=""></span>
                        </div>
                    </div>
                </div>
                <div style="padding: 0.1rem 0;"></div>
                <div class="main_content_btn">
                    <div class="btn_prev">
                        <button class="clickPrev">上一步</button>
                    </div>
                    <div class="btn_next">
                        <button class="clickNext2">下一步</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_content conhide">
            <div class="main_content_t">
                <h4>完成</h4>
            </div>
            <div class="main_content_b">
                <div class="main_content_success">
                    <div class="success_icon">
                        <img src="./images/success.svg" alt="">
                    </div>
                    <div class="success_info">
                        <h4>恭喜您修改成功</h4>
                        <p>
                            提示：系统会在<span>4</span>秒内跳转到登录页面...
                        </p>
                    </div>
                </div>
                <div style="padding: 0.35rem 0;"></div>
                <div class="main_content_btn">
                    <div class="btn_login">
                        <button>直接登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p> 版权所有©中海创科技（福建）集团有限公司COPYRIGHT©2021-2025 Histron Technology Co.,Ltd All rights reserved</p>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            $(".clickNext").on("click", function () {
                $($(".main_content")[0]).addClass("conhide")
                $($(".main_content")[1]).removeClass("conhide")
            })
            $(".clickNext2").on("click", function () {
                $($(".main_content")[1]).addClass("conhide")
                $($(".main_content")[2]).removeClass("conhide")
            })
            $(".clickPrev").on("click", function () {
                $($(".main_content")[1]).addClass("conhide")
                $($(".main_content")[0]).removeClass("conhide")
            })
        })
    </script>
</body>

</html>